<template>
  <view>
    <uni-list>
      <article-item
        v-for="item in datalist"
        :key="item.qid"
        :data="item"
      />
    </uni-list>
    <text-toast-bar
      :is-null="articleNum === 0"
      :load-more="start !== articleNum"
      :no-more="start === articleNum"
    />
  </view>
</template>

<script>
import ArticleItem from './ArticleItem.vue' 
import textToastBar from '@/components/textToastBar.vue'

import { getRecommendArticleNum, getRecommendArticle } from '@/common/api/article.js'
export default {
  components: {
    ArticleItem,
    textToastBar
  },
  data() {
    return {
      datalist: [],
      articleNum: 0,
      start: 0	
    }
  },
  mounted() {
    getRecommendArticleNum()
      .then(res => {
        this.articleNum = res
        this.getMore()
      })
  },
  methods: {
    getMore() {
      getRecommendArticle(this.start, this.start + 10)
        .then(res => {
          console.log(res)
          this.datalist = [...this.datalist, ...res]
          this.start = (this.start + 10) >= this.articleNum ? this.articleNum : this.start + 10
        })
    }
  }
}
</script>

<style>

</style>
